<template>
	<view class="followSite">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom" @back="backNum">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">关注站点</block>
		</cu-custom>

		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<view class="title">我的关注点(最多可选{{ maxNum }}个)</view>
			<view class="my-follow-site">
				<view v-for="(i, index) in followList" :key="index" class="list-sin">
					<text class="nop"> {{ i.siteName }}{{ i.siteNo }}</text>
					<u-icon name="close" color="#FF5C00" :size="26" @click="deleteSite(i, index)"></u-icon>
				</view>
			</view>

			<view class="all-site">
				<view class="site-title">
					<view class="title-type pr10">
						<uni-data-select
							v-model="siteType"
							ref="selectCpn"
							:localdata="range"
							@change="changeSiteType"
						></uni-data-select>
					</view>

					<u-input
						v-model="searchValue"
						type="text"
						class="ml20"
						:border="true"
						:height="60"
						placeholder="请输入搜索内容"
					/>
				</view>

				<view class="site-list">
					<view class="site-sin" v-for="(i, index) in tableListFilter" :key="i.id" @click="choseItem(i, index)">
						<view>
							<text>{{ i.siteName }}</text>
							<text class="ml20">{{ i.siteNo }}</text>
						</view>
						<i
							class="iconfont icon-a-guanzhu-yiguanzhu2"
							:style="{ color: selectIds.includes(i.siteNo) ? '#FF9900' : '#D7D7D7' }"
						></i>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	import homeApi from '@/api/home.js'
	import controlApi from '@/api/monitor/control.js'
	import fwSiteApi from '@/api/user/fwSite.js'
	const userInfo = uni.getStorageSync('userInfo')
	import axios from 'axios'
	export default {
		name: 'followSite',
		components: {},
		data() {
			return {
				appHeight: 0,
				followList: [],
				siteType: 'WPStationZQ',
				range: [
					{ datas: [], value: 'WPStationZQ', text: '水文站' },
					{ datas: [], value: 'WPStationRR', text: '水库站' },
					{ datas: [], value: 'WPStationPP', text: '雨量站' },
					{ datas: [], value: 'WPStationZZ', text: '水位站' }
				],

				searchValue: '',

				tableList: [
					// {name:'',id:'',isActive:false}
				],

				selectIds: [],
				maxNum: 5
			}
		},
		computed: {
			tableListFilter() {
				let items = this.tableList.filter((el) => {
					return el.siteName.indexOf(this.searchValue) > -1 || el.siteNo.indexOf(this.searchValue) > -1
				})
				return items
			}
		},

		async mounted() {
			this.appHeight = await this.$getHeight('.nav-custom')
			this.initMyFw(true)
		},
		methods: {
			async initMyFw(isTrue) {
				let list = await fwSiteApi.list({ userId: userInfo.user_id })
				this.followList = list.data ? list.data.attentionSiteInfo : []
				this.selectIds = this.followList.map((el) => el.siteNo)

				if (isTrue) {
					this.initPage()
				}
			},
			async initPage() {
				let list = []
				for (let i = 0; i < this.range.length; i++) {
					list.push(controlApi.stationToLogtdLattd(this.range[i].value))
					// const resp = await controlApi.stationToLogtdLattd(this.range[i].value)
					// this.range[i].datas = resp.data.features.map((site) => {
					// 	let obj = {}
					// 	obj.siteType = this.range[i].value
					// 	obj.siteName = site.properties.stnm
					// 	obj.siteNo = site.properties.stcd
					// 	return obj
					// })
				}
				uni.showLoading({
					title: '正在加载'
				})
				let resp = await axios.all(list)

				resp.forEach((el, i) => {
					this.range[i].datas = el.data.features.map((site) => {
						let obj = {}
						obj.siteType = this.range[i].value
						obj.siteName = site.properties.stnm
						obj.siteNo = site.properties.stcd
						return obj
					})
				})
				console.info(`resp:`, resp)
				this.$hideLoading()
				// const resp2 = await controlApi.getAll()
				// this.range.map((el) => {
				// 	el.datas = resp2.data[el.value].data.map((site) => {
				// 		site.siteType = el.value
				// 		site.siteName = site.name
				// 		site.siteNo = site.id
				// 		return site
				// 	})
				// 	return el
				// })
				this.$refs.selectCpn.change(this.range[0])
			},
			getSon() {
				this.$nextTick(() => {
					let item = this.range.find((el) => el.value == this.siteType)
					this.tableList = item.datas
				})
			},
			async deleteSite(i, index) {
				this.followList.splice(index, 1)
				this.onEdite()
			},
			changeSiteType() {
				this.getSon()
			},

			choseItem(i) {
				let index = this.followList.findIndex((el) => el.siteNo == i.siteNo)
				if (index > -1) {
					this.followList.splice(index, 1)
				} else {
					if (this.followList.length >= this.maxNum) {
						this.$refs.uToast.show({
							title: '最多选择5个关注站点',
							type: 'warning ',
							icon: true
						})
						return
					}
					this.followList.push(i)
				}
				console.info(`this.followList:`, this.followList)
				this.onEdite()
			},
			async onEdite() {
				const postData = {
					attentionSiteInfo: this.followList,
					userId: userInfo.user_id
				}
				const resp = await fwSiteApi.addOrEdit(postData)
				if (resp.code == 200) {
					uni.showToast({
						icon: 'info',
						title: '操作成功'
					})
					this.initMyFw()
				}
			},
			backNum() {
				uni.$emit('updateEcList')
			}
		}
	}
</script>
<style lang="less" scoped>
	.app-box {
		position: relative;
		background: #f3f8fe;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		.title {
			height: 70rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			color: #929292;
			text-indent: 56rpx;
		}

		.my-follow-site {
			width: 750rpx;
			max-height: 240rpx;
			// background: #fff;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			// justify-content: space-between;
			padding: 0 2%;
			overflow: auto;
			.list-sin {
				color: #ff5c00;
				font-size: 26rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 10rpx;
				min-width: 45%;
				max-width: 50%;
				flex: 1;
				margin: 0 5rpx;
				margin-bottom: 10rpx;
				height: 60rpx;
				background: #fff4e4;
				border: 1rpx solid #ff5c00;
				border-radius: 4rpx;
			}
		}

		.all-site {
			// bottom: 0;
			width: 750rpx;
			padding: 0 50rpx;
			background: #fff;
			// height: calc(100% - 240rpx - 70rpx);
			flex: 1;
			overflow: hidden;
			.site-title {
				width: 100%;
				display: flex;
				margin-top: 10rpx;
				.title-type {
					width: 188rpx;
					// height: 50rpx;
					background: #41a4ff;
					border-radius: 10rpx;
					border: none;
				}
				/deep/.uni-select {
					border: none;
				}
				/deep/.uni-select__input-text {
					color: #fff;
				}
			}
			.site-list {
				width: 100%;
				height: calc(100% - 60rpx - 20rpx);
				overflow: auto;
				padding-right: 5rpx;
				margin-top: 10rpx;
				border-top: 1rpx solid rgba(0, 0, 0, 0.078);
				.site-sin {
					height: 70rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(0, 0, 0, 0.078);
				}
			}
		}
	}
	.followSite {
		font-size: 26rpx;
		// background: #fff;
	}
</style>
